import { ref } from "vue";

import type { PlusColumn, FieldValues } from "plus-pro-components";

export function useBase() {
  const state = ref<FieldValues>({
    name: "",
    beian: "",
    version: "",
    timezone: "",
    forbiddenip: ""
  });
  const rules = {
    name: [
      {
        required: true,
        message: "请输入名称"
      }
    ]
  };

  const columns: PlusColumn[] = [
    {
      label: "站点名称",
      labelWidth: 105,
      prop: "name",
      valueType: "copy",
      tooltip: "请输入站点名字"
    },
    {
      label: "备案号",
      labelWidth: 105,
      width: 220,
      prop: "beian",
      valueType: "copy",
      tooltip: "请输入备案号"
    },
    {
      label: "版本号",
      labelWidth: 105,
      width: 220,
      prop: "version",
      valueType: "copy",
      tooltip: "请输入版本号"
    },
    {
      label: "时区",
      labelWidth: 105,
      width: 220,
      prop: "timezone",
      valueType: "select",
      tooltip: "请选择时区",
      options: [
        {
          label: "Asia/Shanghai",
          value: "Asia/Shanghai"
        },
        {
          label: "UTC",
          value: "UTC",
          color: "blue"
        }
      ]
    },
    {
      label: "禁止IP",
      labelWidth: 105,
      width: 220,
      prop: "forbiddenip",
      valueType: "textarea",
      tooltip: "请输入禁止IP,分号隔开"
    }
  ];

  const handleChange = (values: FieldValues, prop: PlusColumn) => {
    console.log(values, prop, "change");
  };
  const handleSubmit = (values: FieldValues) => {
    console.log(values, "Submit");
  };
  const handleSubmitError = (err: any) => {
    console.log(err, "err");
  };
  const handleReset = () => {
    console.log("handleReset");
  };
  return {
    state,
    rules,
    columns,
    handleChange,
    handleSubmit,
    handleSubmitError,
    handleReset
  };
}
